<template>
  <div @click.stop v-for="item in data" :key="item.name">
    <input type="checked" v-model="item.checked" />
    <span>{{ item.name }}</span>
    <!-- 递归组件，不需要全局注册，也不需要引入，可用文件名来直接使用 -->
    <!-- ?? 操作符只会处理undefined和null  0和false不会处理-->
    <Tree v-if="item.children?.length" :data="item.children"></Tree>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
interface Tree {
  name: string;
  checked: boolean;
  children?: Tree[]; //?表示可无此属性
}
defineProps<{
  data?: Tree[];
}>();
</script>

<style lang="scss" scoped></style>
